<template>
    <div>
        <!-- 动态 style -->
        <!-- 原理是利用v-bind动态绑定syle属性 -->
        <!-- ：style=”{css属性名:属性值，css 属性名2：属性值}“ -->
        <p :style="{color:str}">我是一个可爱的p</p>
        <!-- 将css中-链接改为驼峰命名 -->
        <!-- 如果非要用-链接，可以给属性名加引号 -->
        <p :style="{color:str,'backgroundColor':'green'}">我是第二个可爱的p</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            str:'red'
        };
    },
}
</script>

<style lang="scss" scoped>

</style>